<template>
	<tn-tabbar :value="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
		activeIconColor="#2074d4" :animation="true" :safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		name: "app-layout",
		data() {
			return {
				tabbarList: [{
						title: '首页',
						activeIcon: 'home-smile-fill',
						inactiveIcon: 'home-smile',
						link: '/pages/index'
					},

					// {
					// 	title: '消息',
					// 	activeIcon: 'message-fill',
					// 	inactiveIcon: 'message',
					// 	count: 0,
					// 	link: '/pages/message'
					// },
					{
						title: '我的',
						activeIcon: 'my-fill',
						inactiveIcon: 'my',
						link: '/pages/my'
					},
				],
			};
		},
		components: {

		},
		props: {
			currentIndex: {
				type: Number,
				default () {
					return 0;
				}
			},
		},
		computed: {
			...mapState({
				font_size: state => state.font_size
			})
		},
		watch: {

		},
		created() {},
		mounted() {

		},
		beforeDestroy() {

		},
		methods: {

			// 切换导航
			switchTabbar(i) {
				let that = this;
				uni.navigateTo({
					url: that.tabbarList[i].link,
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.app-layout {
		max-width: 100%;
		//钉钉规范底色
		background-color: #F2F2F6;
		// background-color: #fff;
		min-height: 100vh;
		font-size: 32rpx;
		//#ifdef MP-ALIPAY
		position: relative;
		z-index: 1;
		//#endif
	}

	.platform {
		font-size: rpx;
		color: #AAAAAA
	}
</style>